<!DOCTYPE html>
<html>
<head>
    <title>Custom Css and JavaScript</title>
</head>
<body>
    <div id="customcssjsConfigurationPage" data-role="page" class="page type-interior pluginConfigurationPage" data-controller="__plugin/customcssjs_providerjs" data-helpurl="https://github.com/Shurelol/Emby.CustomCssJS" data-title="${CustomCssJS Provider}">
        <div data-role="content">
            <div class="content-primary">

                <form id="customcssjsConfigurationForm" class="padded-top">

                    <div class="sectionTitleContainer sectionTitleContainer-cards">
                        <h2 class="sectionTitle sectionTitle-cards">
                            <span>${Custom JavaScript}</span>
                        </h2>
                        <button is="emby-button" id="customjsAddBtn" value="0" type="button" class="raised raised-mini btnAddDevice submit sectionTitleButton emby-button emby-button-backdropfilter raised-backdropfilter" style="margin-left:1em;">
                            <i class="md-icon button-icon button-icon button-icon-left">add</i>
                            <span>${Add}</span>
                        </button>
                    </div>
                    <div class="fieldDescription" style="margin-left: 0.5rem; margin-top: 1rem">${Provided for All users}</div>
                    <br>

                    <div id="customjsList" is="emby-itemscontainer" class="itemsContainer flex-direction-column flex flex-grow"></div>
                    <br>
                    <br>

                    <div class="sectionTitleContainer sectionTitleContainer-cards">
                        <h2 class="sectionTitle sectionTitle-cards">
                            <span>${Custom Css}</span>
                        </h2>
                        <button is="emby-button" id="customcssAddBtn" value="0" type="button" class="raised raised-mini btnAddDevice submit sectionTitleButton emby-button emby-button-backdropfilter raised-backdropfilter" style="margin-left:1em;">
                            <i class="md-icon button-icon button-icon button-icon-left">add</i>
                            <span>${Add}</span>
                        </button>
                    </div>
                    <div class="fieldDescription" style="margin-left: 0.5rem; margin-top: 1rem">${Provided for All users}</div>
                    <br>

                    <div id="customcssList" is="emby-itemscontainer" class="itemsContainer flex-direction-column flex flex-grow"></div>
                    <br>


                    <div id="customcssjsTemplate" class="listItem focusable listItem-hoverable listItem-withContentWrapper hide">
                        <div class="listItem-content listItemContent-touchzoom listItem-border">
                            <i class="listItemIcon md-icon customcssjsState"></i>
                            <div class="listItemBody itemAction">
                                <div class="listItemBodyText listItemBodyText-nowrap listItemBodyText-lf customcssjsName"></div>
                                <div class="listItemBodyText listItemBodyText-nowrap listItemBodyText-lf listItemBodyText-secondary customcssjsDescription"></div>
                                <div class="listItemBodyText listItemBodyText-nowrap listItemBodyText-lf listItemBodyText-secondary customcssjsDate"></div>
                            </div>
                            <button type="button" is="paper-icon-button-light" class="listItemButton itemAction md-icon paper-icon-button-light customcssjsEditBtn">edit</button>
                            <button type="button" is="paper-icon-button-light" class="listItemButton itemAction md-icon paper-icon-button-light customcssjsDelBtn">delete</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</body>
</html>